<template>
    <div id="withdraw" class="bg-account">
        <div class="account-info con-wrap">
            <h4 class="account-t4">我的余额</h4>
            <div class="account-money"><span>￥</span>{{ userInfo.money }}</div>
        </div>
        <van-cell-group inset class="mt20">
            <van-field v-model="withdrawInfo.money" center type="number" label-align="top" class="field-large" label="提现金额" placeholder="请输入提现金额">
                <template #extra>
                    <div class="icon-money">￥</div>
                </template>
            </van-field>
            <p class="withdraw-tips">提现手续费：提现金额小于100元手续费{{ configInfo.min_handling }}元，提现金额大于100元按{{ configInfo.ratio_handling }}%收取</p>
        </van-cell-group>
        <p class="con-wrap pay-select">选择到账方式</p>
        <van-radio-group v-model="withdrawInfo.type" class="mt10">
            <van-cell-group inset>
                <van-cell :title="'银行卡(' + withdrawDetail.bank_person + ')'" clickable @click="rechargeInfo.type = 1">
                    <template #icon>
                        <img class="img-pay" src="/statics/home/images/pay-wx.png" />
                    </template>
                    <template #right-icon>
                        <van-radio :name="1" />
                    </template>
                </van-cell>
            </van-cell-group>
            <van-cell-group inset class="mt20">
                <van-cell :title="'支付宝(' + withdrawDetail.alipay_name + ')'" clickable @click="rechargeInfo.type = 2">
                    <template #icon>
                        <img class="img-pay" src="/statics/home/images/pay-alipay.png" />
                    </template>
                    <template #right-icon>
                        <van-radio :name="2" />
                    </template>
                </van-cell>
            </van-cell-group>
        </van-radio-group>
        <div class="btn-1 btn-1-main btn-withdraw" @click="toSubmit()">提现</div>
        <a href="#/withdraw/list" class="withdraw-link color-main">提现记录</a>
    </div>
</template>


<script>
import { showToast } from 'vant';

export default {
    name: 'Withdraw',
    data() {
        return {
            withdrawInfo:{
                type:1,
                money:'',
            },
            userInfo:{
                money:0
            },
            withdrawDetail:{
                alipay_name:'',
                bank_person:'',
            },
            configInfo:{
                min_handling:0,
                ratio_handling:0,
            },
        }
    },
    created() {
        this.$api.user.info({}).then(res => {
            this.userInfo = res.result
        }).finally(e => {});
        this.$api.user.withdrawinfo({}).then(res => {
            this.withdrawDetail = res.result
        }).finally(e => {});
        this.$api.config.info({}).then(res => {
            this.configInfo = res.result
        }).finally(e => {});
    },
    methods: {
        toSubmit(){
            console.log(this.withdrawInfo)
            console.log(this.userInfo)
            if(parseFloat(this.withdrawInfo.money) > parseFloat(this.userInfo.money)){
                showToast({
                    message:"提现金额不能大于账户余额",
                })
                return;
            }
            this.$api.withdraw.create(this.withdrawInfo).then(res => {
                this.$router.push('/withdraw/success/' + res.result.id);
            }).finally(e => {});
        },
    }
}
</script>
